/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-01 14:21:53
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-01 20:33:40
 * @FilePath: \app\src\components\ProductAll\ProductAll.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react'
import styles from './ProductAll.module.css'
import { Divider, Row, Col, Image } from 'antd'

// 数据组件
import { ProductText } from './ProductText'
interface Props {
  imgSrc: string,
  title: JSX.Element,
  arrList: any[]
}

export const ProductAll: React.FC<Props> = ({ imgSrc, title, arrList }) => {
  return (
    <div className={styles.content}>
      <Divider orientation="left">{title}</Divider>
      <Row>
        <Col span={4}>
          <Image src={imgSrc} className={styles['side-image']}></Image>
        </Col>
        <Col span={20}>
          <Row>
            <Col span={12}>
              <ProductText
                id={arrList[0].id}
                title={arrList[0].title}
                price={arrList[0].price}
                images={arrList[0].touristRoutePictures[0].url}
                size={'large'}
              />
            </Col>
            <Col span={12}>
              <Row>
                <Col span={12}>
                  <ProductText
                    id={arrList[1].id}
                    title={arrList[1].title}
                    price={arrList[1].price}
                    images={arrList[1].touristRoutePictures[0].url}
                    size={'small'}
                  />
                </Col>
                <Col span={12}>
                  <ProductText
                    id={arrList[2].id}
                    title={arrList[2].title}
                    price={arrList[2].price}
                    images={arrList[2].touristRoutePictures[0].url}
                    size={'small'}
                  />
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <ProductText
                    id={arrList[3].id}
                    title={arrList[3].title}
                    price={arrList[3].price}
                    images={arrList[3].touristRoutePictures[0].url}
                    size={'small'}
                  />
                </Col>
                <Col span={12}>
                  <ProductText
                    id={arrList[4].id}
                    title={arrList[4].title}
                    price={arrList[4].price}
                    images={arrList[4].touristRoutePictures[0].url}
                    size={'small'}
                  /></Col>
              </Row>
            </Col>
          </Row>
          {/* 第二行 */}
          <Row>
            <Col span={6}>
              <ProductText
                id={arrList[5].id}
                title={arrList[5].title}
                price={arrList[5].price}
                images={arrList[5].touristRoutePictures[0].url}
                size={'small'}
              />
            </Col>
            <Col span={6}>
              <ProductText
                id={arrList[6].id}
                title={arrList[6].title}
                price={arrList[6].price}
                images={arrList[6].touristRoutePictures[0].url}
                size={'small'}
              />
            </Col>
            <Col span={6}>
              <ProductText
                id={arrList[6].id}
                title={arrList[6].title}
                price={arrList[6].price}
                images={arrList[6].touristRoutePictures[0].url}
                size={'small'}
              />
            </Col>
            <Col span={6}>
              <ProductText
                id={arrList[7].id}
                title={arrList[7].title}
                price={arrList[7].price}
                images={arrList[7].touristRoutePictures[0].url}
                size={'small'}
              />
            </Col>
          </Row>
        </Col>
      </Row>

    </div>
  )
}

